<!DOCTYPE html>
<!-- saved from url=(0059)http://ie.microsoft.com/testdrive/performance/FlyingImages/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Copyright © Microsoft Corporation. All Rights Reserved. -->
    <!-- Demo Author: Jason Weber, Microsoft Corporation -->
    <title>Flying Images</title>

    <!-- Sharing markup for Windows 8: Added by AlexFe -->
    <meta name="image" content="files/FlyingImages.png"> 
    <meta name="description" content="The original demo, now with touch.">

    <meta name="t_omni_demopage" content="1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style type="text/css">
        html
        {
            background-image: url('files/Background.jpg');
            background-repeat: repeat;
            overflow: hidden;
			-ms-touch-action: none;
            -ms-content-zooming: none;
        }
        
        body
        {
            margin: 0px;
            padding: 0px;
            font-family: Segoe UI, Verdana, Arial, Sans-Serif;
            font-size: 11pt;
            color: #666;
        }
        
        a:link, a:visited
        {
            color: #00c7ff;
            text-decoration: none;
        }
        
        a:link:hover, a:visited:hover
        {
            color: #00c7ff;
            text-decoration: underline;
        }
        
        #informationpanel
        {
            position: absolute;
            text-align: center;
            top: 18px;
            left: 28px;
            width: 60px;
            color: Gray;
        }
        
        .informationvalue
        {
            font-size: 24pt;
            margin-bottom: -4px;
        }
        
        .informationlabel
        {
            font-size: 9pt;
            margin-bottom: 10px;
        }
        
        .controlpanelsection1
        {
            position: absolute;
            top: 42px;
            right: 150px;
            width: 100px;
        }
        
        .controlpanelsection2
        {
            position: absolute;
            top: 42px;
            right: 36px;
            width: 100px;
        }
        
        .notes
        {
            position: absolute;
            top: 146px;
            right: 48px;
            width: 200px;
            font-size: 9pt;
            font-style: italic;
        }
        
        .touchlabel
        {
            font-size: 9pt;
            font-weight: bold;
            font-style: normal;
        }
        
        .controllabel
        {
            font-size: 9pt;
            font-weight: bold;
        }
        
        .control
        {
            font-size: 9pt;
        }
        
        #board
        {
            position: absolute;
            width: 100%;
            height: 100%;
			-ms-touch-action: none;
        }
        
        #board img
        {
            position: absolute;
        }
        
        #copyright
        {
            color: Gray;
            font-size: 8pt;
            position: absolute;
            bottom: 3px;
            right: 6px;
            width: 100%;
            text-align: right;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="files/ReturnAndShareControls.css">
    <script type="text/javascript">
        var intervalID;

        var boardWidth;
        var boardHeight;
        var boardLeft;
        var boardTop;

        var board;
        var fps;
        var countimages;
        var currentSecond = 0;
        var currentFPS = 0;
        var count = 6;
        var images = [];
        var mouseX = 0;
        var mouseY = 0;
        var zoomed = false;
        var mouseOverControls = false;
        var zoomingOut = false;
        var timeLastAnimation;
        var insidecontrolpanel;
        var controlpanelzoomed = false;
        var useBrowserLogos = true;
        var lastPointerDown = new Date();
        var trackPointerDown = false;
        var countPointerDown = 0;

        var IMAGE;
        var DEFAULTIMAGE = "files/IEMedium.png";
        var MIXIMAGE = "files/MixPhoto.png";
        var LARGEIMAGE = "files/LargeIELogo.png";
        var LOGO1 = "files/Logo1.png";
        var LOGO2 = "files/Logo2.png";
        var LOGO3 = "files/Logo3.png";
        var LOGO4 = "files/Logo4.png";
        var IEIMAGE = "files/IELogo.png";
        var PROXIMITY = 90;
        var PREVIOUSPROXIMITY = 90;
        var NORMALPROXIMITY = 90;
        var MINPROXIMITY = 25;
        var MAXPROXIMITY = 160;
        var TARGETPROXIMITY = 25;
        var xDAMPING = 7000;
        var yDAMPING = 10;
        var MINCOUNT = 2;
        var MAXCOUNT = 16;
        var FL = 200;
        var RATIO = 3;
        var TIMEOUT = 15;

        var a = 0;
        var y = 0;

        window.onload = Setup;



        // Setup the Board

        function Setup() {

            IMAGE = DEFAULTIMAGE;
            board = document.getElementById('board');
            fps = document.getElementById('fps');
            countimages = document.getElementById('countimages');
            CreateBoard();

            GetBounds();
            y = mouseY = boardHeight / 2;
            // look for support for touch events
            if (window.navigator.msPointerEnabled) {
                window.addEventListener("resize", GetBounds, false);
                window.addEventListener("contextmenu", function (e) { if(e.preventDefault) { e.preventDefault(); } }, false);
                window.addEventListener("selectstart", function (e) { if(e.preventDefault) { e.preventDefault(); } }, false);
                window.addEventListener("dragstart", function (e) { if(e.preventDefault) { e.preventDefault(); } }, false);
                document.addEventListener("keypress", OnKeyPress, false);
                document.addEventListener("MSPointerMove", OnMouseMove, false);
                document.addEventListener("MSPointerDown", OnPointerDown, false);
                document.addEventListener("MSPointerUp", OnPointerUp, false);
                
				//document.addEventListener("MSGestureHold", function (e) { if(e.preventDefault) { e.preventDefault(); } }, false);
				
                document.getElementById("notes").innerHTML = "<span>Hold shift key to spin faster.</span></span>";
            }
            else if (window.addEventListener) {
                window.addEventListener("resize", GetBounds, false);
                document.addEventListener("keypress", OnKeyPress, false);
                window.addEventListener("mousemove", OnMouseMove, false);
                document.getElementById("notes").innerHTML = "<span>Hold shift key to spin faster.</span>";
            }
            else if (window.attachEvent) {
                window.attachEvent("onresize", GetBounds);
                document.attachEvent("onkeypress", OnKeyPress);
                window.attachEvent("onmousemove", OnMouseMove);
                document.getElementById("notes").innerHTML = "<span>Hold shift key to spin faster.</span>";
            }

            StartAnimation();
        }

        function OnPointerDown(e) {
            if (countPointerDown < 2) countPointerDown++;
            var now = new Date();
            var delta = now - lastPointerDown;
            lastPointerDown = now;
        }

        function OnPointerUp(e) {
            countPointerDown--;
        }

        function StartAnimation() {
            intervalID = setInterval(Draw, 15);
        }

        function GetBounds() {
            boardWidth = board.offsetWidth / 2;
            boardHeight = board.offsetHeight / 2;
            boardTop = board.offsetTop;
            boardLeft = board.offsetLeft;
            for (var p = board.offsetParent; p != null; p = p.offsetParent) {
                boardTop += p.offsetTop;
                boardLeft += p.offsetLeft;
            }
        }



        // Create Board

        function CreateBoard() {

            images = [];
            board.innerHTML = '';

            var c = 1;
            var i = count / 2 - .5;
            for (var x = -i; x <= i; x++) {
                for (var z = -i; z <= i; z++) {
                    var img = document.createElement('img');
                    img.setAttribute("name", "rotatingimage");
                    img.style.left = '5000px';
                    img.x3d = x;
                    img.z3d = z;
                    if (useBrowserLogos == true) {
                        switch (c) {
                            case 1:
                                img.src = IEIMAGE;
                                c++;
                                break;
                            case 2:
                                img.src = LOGO2;
                                c++;
                                break;
                            case 3:
                                img.src = LOGO1;
                                c++;
                                break;
                            case 4:
                                img.src = LOGO4;
                                c++;
                                break;
                            case 5:
                                img.src = LOGO3;
                                c = 1;
                                break;
                        }
                    }
                    else {
                        img.src = IMAGE;
                    }
                    board.appendChild(img);
                    images.push(img);
                }
            }
            countimages.innerHTML = images.length;
        }



        // Draw the Images

        function Draw() {

            a += (mouseX - boardWidth) / xDAMPING;
            y += ((mouseY - boardHeight) - y) / yDAMPING;

            var ca = Math.cos(a);
            var sa = Math.sin(a);

            var img = null;
            for (var i = 0; img = images[i]; i++) {
                var x = img.x3d * (boardWidth / (PROXIMITY / 5));
                var z = img.z3d * (boardWidth / (PROXIMITY / 5));
                var X = sa * x + ca * z;
                var Y = sa * z - ca * x;
                var W = FL / (FL + Y);
                var w = Math.round(W * boardWidth / (PROXIMITY / 5));

                img.style.left = Math.round(X * W + boardWidth - w * .5) + 'px';
                img.style.top = Math.round(y * W + boardHeight - w * .5) + 'px';
                var width = Math.max(2, w);
                var height = Math.max(6, w * RATIO);
                if (width < 5) {
                    img.style.width = '0px';
                    img.style.height = '0px';
                }
                else {
                    img.style.width = width + 'px';
                    img.style.height = height + 'px';
                }
                img.style.zIndex = w;
            }

            var rightNow = new Date().getSeconds();
            if (rightNow == currentSecond) {
                currentFPS++;
            }
            else {
                currentSecond = rightNow;
                // Account for clock skew which can be up to two frames (33.33ms) when hardware accelerated.
                fps.innerHTML = (currentFPS > 57) ? 60 : currentFPS;
                currentFPS = 1;
            }
        }



        // Zoom Functions

        function ZoomIn() {
            TARGETPROXIMITY = MINPROXIMITY;
            ZoomToTarget();
        }

        function ZoomOut() {
            PREVIOUSPROXIMITY = PROXIMITY;
            TARGETPROXIMITY = MAXPROXIMITY;
            ZoomToTarget();
        }

        function ZoomNormal() {
            TARGETPROXIMITY = NORMALPROXIMITY;
            if (PROXIMITY < NORMALPROXIMITY) {
                PROXIMITY = PROXIMITY + 1;
                setTimeout(ZoomNormal, 1);
            }
            else if (PROXIMITY > NORMALPROXIMITY) {
                PROXIMITY = PROXIMITY - 1;
                setTimeout(ZoomNormal, 1);
            }
        }

        function ZoomRestore() {
            TARGETPROXIMITY = PREVIOUSPROXIMITY;
            if (PROXIMITY + 5 < TARGETPROXIMITY) {
                PROXIMITY = PROXIMITY + 5;
                setTimeout(ZoomRestore, 1);
            }
            else if (PROXIMITY - 5 > TARGETPROXIMITY) {
                PROXIMITY = PROXIMITY - 5;
                setTimeout(ZoomRestore, 1);
            }
            else {
                PROXIMITY = TARGETPROXIMITY;
            }
        }

        function ZoomToTarget() {
            if (PROXIMITY < TARGETPROXIMITY) {
                PROXIMITY = PROXIMITY + 1;
                setTimeout(ZoomToTarget, 1);
            }
            else if (PROXIMITY > TARGETPROXIMITY) {
                PROXIMITY = PROXIMITY - 1;
                setTimeout(ZoomToTarget, 1);
            }
        }

        function ZoomInButton() {
            PREVIOUSPROXIMITY = MINPROXIMITY;
            ZoomIn();
        }

        function ZoomNormalButton() {
            PREVIOUSPROXIMITY = NORMALPROXIMITY;
            ZoomNormal();
        }



        // Mouse Move

        function OnMouseMove(e) {

            if (countPointerDown > 1) {
                return false;
            }

            if (typeof e == 'undefined')
                e = window.event;

            if (e.ctrlKey) {
                return false;
            }

            if (e.shiftKey) {
                xDAMPING = 1000;
                yDAMPING = 10;
            }
            else {
                xDAMPING = 7000;
                yDAMPING = 10;
            }

            if ((mouseX > (boardWidth * 2) - 200) && (mouseY < 150)) {
                if (controlpanelzoomed == false) {
                    controlpanelzoomed = true;
                    ZoomOut();
                }
            }
            else {
                if (controlpanelzoomed == true) {
                    controlpanelzoomed = false;
                    ZoomRestore();
                }
            }

            mouseX = e.clientX;
            mouseY = e.clientY;
            return false;
        }



        // Key Press

        function OnKeyPress(e) {
            if (!e) e = window.event;

            var key = e.key;
            var code = e.keyCode || e.charCode;

            if (key == "+" || code == 43) {
                ChangeCount(2);
            }
            else if (key == "-" || code == 45) {
                ChangeCount(-2);
            }
            else if (key == "z" || code == 122) {
                ZoomIn();
            }
            else if (key == "x" || code == 120) {
                ZoomNormal();
            }
            else if (key == "r" || code == 114) {
                ResetScene();
            }
        }



        // Increase Items

        function ChangeCount(n) {
            var newcount = count + n;
            if (newcount >= MINCOUNT && newcount <= MAXCOUNT) {
                count = newcount;
                CreateBoard();

            }
        }

        function ResetScene() {
            count = 6;
            PROXIMITY = NORMALPROXIMITY;
            IMAGE = DEFAULTIMAGE;
            y = mouseY = boardHeight / 2;
            CreateBoard();
        }



        // Change Images

        function UseHighResolutionImage() {
            useBrowserLogos = false;
            IMAGE = LARGEIMAGE;
            CreateBoard();
        }

        function UseDefaultImages() {
            useBrowserLogos = false;
            IMAGE = DEFAULTIMAGE;
            CreateBoard();
        }

        function UseBrowserLogos() {
            useBrowserLogos = true;
            IMAGE = DEFAULTIMAGE;
            CreateBoard();
        }

        function UseMixImage() {
            useBrowserLogos = false;
            IMAGE = MIXIMAGE;
            CreateBoard();
        }

        function UseMyBrowserLogo() {
            useBrowserLogos = false;
            if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
                IMAGE = LOGO1;
            }
            else if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
                IMAGE = LOGO2;
            }
            else if (navigator.appName == "Opera") {
                IMAGE = LOGO3;
            }
            else if (navigator.userAgent.toLowerCase().indexOf('safari') > -1) {
                IMAGE = LOGO4;
            }
            else {
                IMAGE = DEFAULTIMAGE;
            }

            CreateBoard();
        }



    </script>
</head>
<body id="demoBody">
    <div id="board"><img name="rotatingimage" style="left: 706px; top: 327px; width: 25px; height: 75px; z-index: 25; " src="files/IELogo.png"><img name="rotatingimage" style="left: 713px; top: 290px; width: 29px; height: 87px; z-index: 29; " src="files/Logo2.png"><img name="rotatingimage" style="left: 723px; top: 241px; width: 33px; height: 99px; z-index: 33; " src="files/Logo1.png"><img name="rotatingimage" style="left: 737px; top: 171px; width: 40px; height: 120px; z-index: 40; " src="files/Logo4.png"><img name="rotatingimage" style="left: 757px; top: 67px; width: 50px; height: 150px; z-index: 50; " src="files/Logo3.png"><img name="rotatingimage" style="left: 791px; top: -107px; width: 67px; height: 201px; z-index: 67; " src="files/IELogo.png"><img name="rotatingimage" style="left: 681px; top: 327px; width: 25px; height: 75px; z-index: 25; " src="files/Logo2.png"><img name="rotatingimage" style="left: 685px; top: 289px; width: 29px; height: 87px; z-index: 29; " src="files/Logo1.png"><img name="rotatingimage" style="left: 690px; top: 240px; width: 33px; height: 99px; z-index: 33; " src="files/Logo4.png"><img name="rotatingimage" style="left: 697px; top: 171px; width: 40px; height: 120px; z-index: 40; " src="files/Logo3.png"><img name="rotatingimage" style="left: 707px; top: 67px; width: 50px; height: 150px; z-index: 50; " src="files/IELogo.png"><img name="rotatingimage" style="left: 724px; top: -107px; width: 67px; height: 201px; z-index: 67; " src="files/Logo2.png"><img name="rotatingimage" style="left: 656px; top: 327px; width: 25px; height: 75px; z-index: 25; " src="files/Logo1.png"><img name="rotatingimage" style="left: 656px; top: 289px; width: 29px; height: 87px; z-index: 29; " src="files/Logo4.png"><img name="rotatingimage" style="left: 657px; top: 240px; width: 33px; height: 99px; z-index: 33; " src="files/Logo3.png"><img name="rotatingimage" style="left: 657px; top: 170px; width: 40px; height: 120px; z-index: 40; " src="files/IELogo.png"><img name="rotatingimage" style="left: 657px; top: 66px; width: 50px; height: 150px; z-index: 50; " src="files/Logo2.png"><img name="rotatingimage" style="left: 657px; top: -108px; width: 67px; height: 201px; z-index: 67; " src="files/Logo1.png"><img name="rotatingimage" style="left: 631px; top: 327px; width: 25px; height: 75px; z-index: 25; " src="files/Logo4.png"><img name="rotatingimage" style="left: 628px; top: 289px; width: 29px; height: 87px; z-index: 29; " src="files/Logo3.png"><img name="rotatingimage" style="left: 623px; top: 240px; width: 33px; height: 99px; z-index: 33; " src="files/IELogo.png"><img name="rotatingimage" style="left: 617px; top: 170px; width: 40px; height: 120px; z-index: 40; " src="files/Logo2.png"><img name="rotatingimage" style="left: 607px; top: 66px; width: 50px; height: 150px; z-index: 50; " src="files/Logo1.png"><img name="rotatingimage" style="left: 590px; top: -109px; width: 67px; height: 201px; z-index: 67; " src="files/Logo4.png"><img name="rotatingimage" style="left: 606px; top: 326px; width: 25px; height: 75px; z-index: 25; " src="files/Logo3.png"><img name="rotatingimage" style="left: 599px; top: 289px; width: 29px; height: 87px; z-index: 29; " src="files/IELogo.png"><img name="rotatingimage" style="left: 590px; top: 240px; width: 33px; height: 99px; z-index: 33; " src="files/Logo2.png"><img name="rotatingimage" style="left: 576px; top: 170px; width: 40px; height: 120px; z-index: 40; " src="files/Logo1.png"><img name="rotatingimage" style="left: 556px; top: 65px; width: 50px; height: 150px; z-index: 50; " src="files/Logo4.png"><img name="rotatingimage" style="left: 523px; top: -110px; width: 67px; height: 201px; z-index: 67; " src="files/Logo3.png"><img name="rotatingimage" style="left: 581px; top: 326px; width: 25px; height: 75px; z-index: 25; " src="files/IELogo.png"><img name="rotatingimage" style="left: 570px; top: 289px; width: 29px; height: 87px; z-index: 29; " src="files/Logo2.png"><img name="rotatingimage" style="left: 556px; top: 239px; width: 33px; height: 99px; z-index: 33; " src="files/Logo1.png"><img name="rotatingimage" style="left: 536px; top: 169px; width: 40px; height: 120px; z-index: 40; " src="files/Logo4.png"><img name="rotatingimage" style="left: 506px; top: 65px; width: 50px; height: 150px; z-index: 50; " src="files/Logo3.png"><img name="rotatingimage" style="left: 456px; top: -111px; width: 67px; height: 201px; z-index: 67; " src="files/IELogo.png"></div>
    <div class="controlpanelsection1">
        <div class="controllabel">
            Image Size</div>
        <div class="control">
            <a class="control" onclick="UseDefaultImages();return false;" href="http://ie.microsoft.com/testdrive/performance/FlyingImages/#">Default IE Logo</a></div>
        <div class="control">
            <a class="control" onclick="UseHighResolutionImage();return false;" href="http://ie.microsoft.com/testdrive/performance/FlyingImages/#">Large IE
                Logo</a></div>
        <div class="control">
            <a class="control" onclick="UseMixImage();return false;" href="http://ie.microsoft.com/testdrive/performance/FlyingImages/#">Mix Photo</a></div>
        <div class="control">
            <a class="control" onclick="UseMyBrowserLogo();return false;" href="http://ie.microsoft.com/testdrive/performance/FlyingImages/#">My Browser</a></div>
        <div class="control">
            <a class="control" onclick="UseBrowserLogos();return false;" href="http://ie.microsoft.com/testdrive/performance/FlyingImages/#">All Browsers</a></div>
    </div>
    <div class="controlpanelsection2">
        <div class="controllabel">
            Other</div>
        <div class="control">
            <a class="control" onclick="ChangeCount(2);return false;" href="http://ie.microsoft.com/testdrive/performance/FlyingImages/#">Increase</a></div>
        <div class="control">
            <a class="control" onclick="ChangeCount(-2);return false;" href="http://ie.microsoft.com/testdrive/performance/FlyingImages/#">Decrease</a></div>
        <div class="control">
            <a class="control" onclick="ZoomInButton();return false;" href="http://ie.microsoft.com/testdrive/performance/FlyingImages/#">Zoom In</a></div>
        <div class="control">
            <a class="control" onclick="ZoomNormalButton();return false;" href="http://ie.microsoft.com/testdrive/performance/FlyingImages/#">Zoom Out</a></div>
        <div class="control">
            <a onclick="ResetScene();return false;" href="http://ie.microsoft.com/testdrive/performance/FlyingImages/#">Reset</a></div>
    </div>
    <div id="notes" class="notes"><span>Hold shift key to spin faster.</span></div>
    <div id="informationpanel">
        <div id="fps" class="informationvalue">60</div>
        <div id="fpscaption" class="informationlabel">FPS</div>
        <div id="countimages" class="informationvalue">36</div>
        <div id="Div1" class="informationlabel">Images</div>
    </div>
    <div id="ReturnAndShareControls">
    <a class="ReturnButton" classname="ReturnButton" href="http://ie.microsoft.com/testdrive/Default.html" alt="Return to Test Drive Home" title="Return to Test Drive Home"></a><a class="ShareOnFacebookButton" classname="ShareOnFacebookButton" href="https://www.facebook.com/sharer.php?u=http://ie.microsoft.com/testdrive/performance/FlyingImages/&t=Flying%20Images" target="_blank" alt="Share this demo on Facebook" title="Share this demo on Facebook"></a><a class="ShareOnTwitterButton" classname="ShareOnTwitterButton" href="http://twitter.com/share" target="_blank" alt="Tweet a link to this demo" title="Tweet a link to this demo"></a><a class="ShareViaEmailButton" classname="ShareViaEmailButton" href="mailto:?subject=Flying%20Images&body=Check%20out%20the%20Flying%20Images%20on%20the%20Internet%20Explorer%20Test%20Drive%20website.%20%0A%20%0Ahttp://ie.microsoft.com/testdrive/performance/FlyingImages/%0A%0A" target="_blank" alt="Email a link to this demo" title="Email a link to this demo"></a></div>
    <span id="copyright">© 2011 Microsoft</span>
    <script type="text/javascript" src="files/TestDriveCommon.js"></script>
    <script type="text/javascript" src="files/ReturnAndShareControls.js"></script>


</body></html>